<template>
  <div>
    <!-- 标题栏 -->
    <van-nav-bar
      title="不凡"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <div class="goodsbody">
      <div class="banner">
        <!-- 这里是个图片 -->
        <img
          src="http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png"
          alt=""
        />
      </div>
      <div class="goodsnav">
        <div class="goodsnav-t" @click="orders">综合</div>
        <div class="goodsnav-c">
          <span>价格</span>
          <span class="goodsnav-c-c">
            <van-icon name="arrow-up" @click="descUp" />
            <van-icon name="arrow-down" @click="ascDown"/>
          </span>
        </div>
        <div class="goodsnav-b" @click="orders">分类</div>
      </div>
      <div class="goodscontent">
        <div class="content-item" v-for="item in goodsitemList" :key="item.id">
          <img :src="item.list_pic_url" alt="" />
          <div class="content-item-t">{{ item.name }}</div>
          <div class="content-item-b">￥{{ item.retail_price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { goodsList } from "@/api/home/goods.js";
export default {
  data() {
    return {
      //人气推荐与好物精选
      isHot: "",
      //新品首发
      isNew: '',
      // desc、asc 排序
      order: "",
      goodsitemList: [],
    };
  },
  methods: {
    getGoods() {
      goodsList({
        isHot:localStorage.getItem('isHot'),
        isNew:localStorage.getItem('isNew'),
        order: this.order,
      }).then((res) => {
        // console.log(res)
        this.goodsitemList = res.data;
        console.log(this.goodsitemList);
      });
    },
    onClickLeft(){
        this.$router.go(-1);
    },
    //升序
    descUp(){
      this.order='desc';
      this.getGoods();
    },
    //降序
    ascDown(){
      this.order='asc';
      this.getGoods();
    },
    //综合
    orders(){
      this.order='',
       this.getGoods();
    }
  },
  created() {
    this.getGoods();
  },
};
</script>
<style lang="scss" scoped>
.goodsbody{
    margin-top: 48px;
    width: 100%;
    height: 2000px;
    background-color: #f4f4f4;
    .banner{
        img{
            width: 100%;
            height: 100%;
        }
    }
    .goodsnav{
        width: 100%;
        height: 40px;
        background-color: #dc6feb;
        div{
            width: 33.3%;
            float: left;
            text-align: center;
            line-height: 40px;
        }
        .goodsnav-t{

        }
        .goodsnav-c{
            .goodsnav-c-c{
                
            }
        }
        .goodsnav-b{

        }
    }
    .goodscontent{
        margin-top: 10px;
        width: 100%;
        height:400px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .content-item{
            background-color: #fff;
            width:49%;
            height: auto;
            margin-bottom: 5px;
            img{
                width: 90%;
                height: auto;
            }
            .content-item-t{
                margin: 10px 0;
                text-align: center;
                padding: 0 15px;
            }
            .content-item-b{
                width: 100%;
                text-align: center;
            }
        }
    }
}
</style>